<%--
  Created by IntelliJ IDEA.
  User: zcd
  Date: 2019/6/22
  Time: 14:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
%>
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>再搜索垃圾分类查询</title>
    <link href="<%=path%>/static/css/all.css?ehwe666ee3" rel="stylesheet" type="text/css">
    <style type="text/css">
        * { -ms-word-wrap: break-word; word-wrap: break-word; }
        html { -webkit-text-size-adjust: none; text-size-adjust: none; }
        html, body {height:99%;width:99%; }
        .wrapx{width:464px;height:34px;margin:20px auto;border:0;position:relative;}
        .input{position:absolute;top:0;left:0;width:457px;margin:0;padding-left:5px;height:30px;line-height:30px;font-size:12px;border:1px solid #c9cacb;}
        s{position:absolute;top:1px;right:0;width:32px;height:32px;background:url("<%=path%>/static/images/arrow.png") no-repeat;}
        ._citys { width: 450px; display: inline-block; border: 2px solid #eee; padding: 5px; position: relative; }
        ._citys span { color: #05920a; height: 15px; width: 15px; line-height: 15px; text-align: center; border-radius: 3px; position: absolute; right: 10px; top: 10px; border: 1px solid #05920a; cursor: pointer; }
        ._citys0 { width: 95%; height: 34px; line-height: 34px; display: inline-block; border-bottom: 2px solid #05920a; padding: 0px 5px; font-size:14px; font-weight:bold; margin-left:6px; }
        ._citys0 li { display: inline-block; line-height: 34px; font-size: 15px; color: #888; width: 80px; text-align: center; cursor: pointer; }
        ._citys1 { width: 100%; display: inline-block; padding: 10px 0; }
        ._citys1 a { width: 83px; height: 35px; display: inline-block; background-color: #f5f5f5; color: #666; margin-left: 6px; margin-top: 3px; line-height: 35px; text-align: center; cursor: pointer; font-size: 12px; border-radius: 5px; overflow: hidden; }
        ._citys1 a:hover { color: #fff; background-color: #05920a; }
        .AreaS { background-color: #05920a !important; color: #fff !important; }
    </style>
    <script src="<%=path%>/static/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="<%=path%>/static/js/Popt.js"></script>

</head>
<body>
<header>
    <div id="topnav">
        <div class="topnav" style="width: 80%">
            <ul>
                <li><a href="<%=path%>/web/garbage/index" title="">首页</a></li>
                <li><a href="<%=path%>/web/article/aboutUs" title="">关于我们</a></li>
                <li><a href="<%=path%>/web/article/development" title="">开发团队</a></li>
                <li><a href="<%=path%>/web/article/articleList">文论</a></li>
                <li><a href="<%=path%>/web/question/list">问答</a></li>
            </ul>
            <ol>
                <li><span id="area">地区：${sessionScope.province}/${sessionScope.city}</span>/</li>
                <li class="region open">
                    <a href="script:void(0);" class="bunt">更换</a>
                    <div class="navigation">
                        <div class="close"><a href="#">关闭</a></div>
                        <div class="select">
                            <div class="wrapx"><input class="input" name="" id="city" type="text" placeholder="请选择" autocomplete="off" readonly="true"><s></s></div>
                        </div>
                    </div>
                </li>
                <c:if test="${empty sessionScope.userinfo}" var="noUser">
                    <li><a href="<%=path%>/web/userinfo/login" title="">登录/注册</a></li>
                </c:if>
                <c:if test="${not noUser}">
                    <li>
                        <a style="padding: 0px" href="<%=path%>/web/usercenter/usPassport" title="个人中心"><img src="<%=path%>/static/images/${sessionScope.userinfo.headPic }"></a>
                        <a href="<%=path%>/web/usercenter/usPassport" title="个人中心">${sessionScope.userinfo.nickname} 欢迎你</a>
                    </li>
                    <%--<li><a>个人中心</a></li>--%>
                    <li><a href="<%=path%>/web/userinfo/exit">退出登录</a></li>
                </c:if>



                <%--<li><span>所在地区：山东/青岛/</span></li>--%>
                <%--<li><a href="#">修改地区</a></li>--%>
                <%--<li><span>选择地区：<select name="省"></select> <select name="市"></select></span></li>--%>
            </ol>
        </div>
    </div>
    <script>
        //给更换按钮加点击事件
        $(function () {
            $(".bunt").click(function () {
                $(this).parent().attr("class", "region off");
            });
            //给关闭按钮添加事件
            $(".close").click(function () {
                $(this).parent().parent().attr("class", "region open");
            });
        })
    </script>

    <script>
        $(function(){
            var provinceName=null;
            var cityName=null;
            var provinceId=null;
            var cityId=null;
            $("#city").click(function (e) {
                SelCity(this,e);
            });
            $("s").click(function (e) {
                SelCity(document.getElementById("city"),e);
            });
            //显示省份
            function SelCity(obj, e) {
                var ths = obj;
                var dal = '<div  class="_citys"><span title="关闭" id="cColse" >×</span><div id="_citysheng"  class="_citys0">请选择省份</div><div id="_citys0" class="_citys1"></div><div style="display:none" id="_citys1" class="_citys1"></div><div style="display:none" id="_citys2" class="_citys1"></div></div>';
                Iput.show({
                    id: ths,
                    event: e,
                    content: dal,
                    width: "470"
                });
                $("#cColse").click(function() {
                    Iput.colse()
                });
                var tb_province = [];
                var data=${requestScope.provinces};
                $(data).each(function () {
                    tb_province.push('<a data-id="' + this.id + '" data-name="' + this.name + '" title="' + this.name + '">' + this.name + '</a>')
                });
                $("#_citys0").append(tb_province.join(""));//把省显示出来
                $("#_citys0 a").click(function() {
                    provinceName=$(this).data("name");
                    provinceId=$(this).data("id");
                    var g = getCity($(this));//调用查询城市的方法
                    $("#_citys1 a").remove();//清除之前的省
                    $("#_citys1").append(g);//把市放进去
                    $("._citys1").hide();
                    $("._citys1:eq(1)").show();
                    $("#_citys0 a,#_citys1 a,#_citys2 a").removeClass("AreaS");
                    $(this).addClass("AreaS");
                    var lev = $(this).data("name");
                    ths.value = $(this).data("name");
                    if (document.getElementById("hcity") == null) {
                        var hcitys = $('<input>', {
                            type: 'hidden',
                            name: "hcity",
                            "data-id": $(this).data("id"),
                            id: "hcity",
                            val: lev
                        });
                        $(ths).after(hcitys)
                    } else {
                        $("#hcity").val(lev);
                        $("#hcity").attr("data-id", $(this).data("id"))
                    }
                    $("#_citys1 a").click(function() {
                        cityName=$(this).data("name");
                        cityId=$(this).data("id");
                        $("#_citys1 a,#_citys2 a").removeClass("AreaS");
                        $(this).addClass("AreaS");
                        var lev = $(this).data("name");
                        if (document.getElementById("hproper") == null) {
                            var hcitys = $('<input>', {
                                type: 'hidden',
                                name: "hproper",
                                "data-id": $(this).data("id"),
                                id: "hproper",
                                val: lev
                            });
                            $(ths).after(hcitys)
                        } else {
                            $("#hproper").attr("data-id", $(this).data("id"));
                            $("#hproper").val(lev)
                        }
                        var bc = $("#hcity").val();
                        ths.value = bc + "/" + $(this).data("name");

                        //利用ajax更改session中的city
                        $.ajax({
                            url: "<%=path%>/web/garbage/changeCity",
                            type: "GET",
                            data: {provinceName: provinceName, cityName: cityName, cityId: cityId, provinceId: provinceId},
                            success: function (data) {
                                $("#area").html("地区：" + provinceName + "/" + cityName + "");
                            }
                        });

                        //利用ajax更改首页的分类
                        $.ajax({
                            url: "<%=path%>/web/garbage/changeType",
                            type: "GET",
                            data: {provinceId: provinceId},
                            success: function (data) {
                                $("#type").empty();
                                $(data).each(function () {
                                    $("#type").append("<li><a href='<%=path%>/web/garbage/result?typeId=" + this.id + "textureId=null'>" + this.title + "</a></li>");

                                })


                            }
                        })

                    })
                })
            }

            // 显示市的方法
            function getCity(obj) {
                var id = obj.data('id');
                var g = '';
                $.ajax({
                    url: "<%=path%>/web/garbage/findCity",
                    async:false,
                    type: "GET",
                    data: {id: id},
                    success: function (data) {
                        $(data).each(function () {
                            $("#city").append("<option  value=" + this.id + ">" + this.name + "</option>");
                            g += '<a data-id="' + this.id + '" data-name="' + this.name + '" title="' + this.name + '">' + this.name + '</a>'
                        });
                    }
                });
                $("#_citysheng").html('请选择城市');
                return g
            }

        });



    </script>

</header>